﻿<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Muti Thread Demo</title>
    <link href="../css/html5reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>HTML5 Muti Thread Demo</h1>
</header>

<div style=" font-size:12px">
<p><b>
HTML5的多线程特性：<br/>
1. 在线程中是不能操作DOM节点的（想要操作的话只能发送消息给worker创建者回调函数）<br/>
2. 多线程的本质其实是真正的系统线程<br/>
3. 能使用setTimeout(), clearTimeout(), setInterval(),clearInterval()等函数<br/>
4. 能进行IO操作（ajax）<br/></b>
<br/>
通过这个例子我们可以看出使用web worker主要分为以下几部分<br/>

WEB主线程:<br/>

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。<br/>

2.通过worker.postMessage( data ) 方法来向worker发送数据。<br/>

3.绑定worker.onmessage方法来接收worker发送过来的数据。<br/>

4.可以使用 worker.terminate() 来终止一个worker的执行。<br/>
<br/>
worker新线程：<br/>

1.通过postMessage( data ) 方法来向主线程发送数据。<br/>

2.绑定onmessage方法来接收主线程发送过来的数据。<br/>
</p>
<br/>


</div>
 <script type="text/javascript">
     //WEB页主线程
     function hello() {
         var worker = new Worker("threadwork.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
         worker.postMessage(" hello world!");     //向worker发送数据
         worker.onmessage = function (evt) {     //接收worker传过来的数据函数
             var msg = evt.data + new Date().toString();
             console.log(msg);              //输出worker发送来的数据
             document.getElementById("result").innerHTML += msg+"<br/>";
             alert(msg);

         }
         worker.onerror = function (event) {
             alert(event.message);
         };
     }
</script>  
<input type="button" onclick="hello();" value="click me" />
<p><div id="result"  ></div>   </p>
  <img src="../img/loading.gif" />

</body>
</html>